import React from "react";
import {
  Form,
  Card,
  InputNumber,
  Switch,
  Row,
  Col,
  Button,
  message,
} from "antd";

import { connect } from "react-redux";
import { bindActionCreators } from "redux";
function System(props) {
  const formItemLayout = {
    labelCol: { span: 12 },
    wrapperCol: { span: 12 },
  };
  const onFinish = (val) => {
    props.loginAction(val);
    message.success("保存成功");
  };
  const onFinishFailed = (errorInfo) => {
    console.log("Failed:", errorInfo);
  };
  return (
    <div style={{ display: "flex", justifyContent: "center" }}>
      <Card title="全局配置" style={{ width: 600 }}>
        <Form
          style={{ display: "flex", justifyContent: "center" }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          initialValues={props.initialValues}
        >
          <Row>
            <Col span={24}>
              <Form.Item
                label="倒计时设置(秒)："
                name="num"
                rules={[
                  {
                    required: false,
                    validator: (rule, value, callback) => {
                      console.log(value, "lllll");
                      if (!/(^[1-9]\d*$)/.test(value)) {
                        callback(new Error("请输入正整数"));
                        return;
                      }
                      if (value > 60 || value < 1) {
                        callback(new Error(`请输入1~60正整数`));
                        return;
                      }
                      callback();
                    },
                  },
                ]}
                {...formItemLayout}
              >
                <InputNumber placeholder="请输入时间" />
              </Form.Item>
            </Col>
            <Col span={24}>
              <Form.Item
                label="倒计时自动显示答案："
                name="isAs"
                rules={[{ required: false }]}
                {...formItemLayout}
              >
                <Switch
                  checkedChildren="开"
                  unCheckedChildren="关"
                  defaultChecked={props.initialValues.isAs}
                />
              </Form.Item>
            </Col>
            <Col
              span={24}
              style={{ display: "flex", justifyContent: "center" }}
            >
              <Form.Item>
                <Button type="primary" htmlType="submit">
                  保存
                </Button>
              </Form.Item>
            </Col>
          </Row>
        </Form>
      </Card>
    </div>
  );
}
const mapStateToProps = (state) => ({
  initialValues: state.system,
});
const mapDispatchToProps = (dispatch) => ({
  loginAction: (data) => {
    dispatch({ type: "SET_SYSTEM", data });
  },
});
export default connect(mapStateToProps, mapDispatchToProps)(System);
